<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>记忆曲线 - 系统架构师考试备考助手</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/memory-curve.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <div class="container">
        <!-- 顶部导航 -->
        <header class="sub-header">
            <a href="index.html" class="back-btn">
                <i class="fas fa-arrow-left"></i>
            </a>
            <h1>记忆曲线</h1>
            <div class="header-action">
                <i class="fas fa-cog"></i>
            </div>
        </header>

        <!-- 记忆曲线说明 -->
        <section class="memory-intro">
            <div class="intro-card">
                <div class="intro-icon">
                    <i class="fas fa-brain"></i>
                </div>
                <div class="intro-content">
                    <h3>艾宾浩斯记忆曲线</h3>
                    <p>基于科学的记忆规律，在最佳时间点复习，提高记忆效率。系统会根据您的学习情况，智能安排复习计划。</p>
                </div>
            </div>
        </section>

        <!-- 今日任务 -->
        <section class="today-tasks">
            <h2 class="section-title">今日任务</h2>
            <div class="task-progress">
                <div class="progress-text">
                    <span>已完成</span>
                    <span>3/5</span>
                </div>
                <div class="progress-bar">
                    <div class="progress" style="width: 60%;"></div>
                </div>
            </div>
            <div class="task-list">
                <div class="task-item completed">
                    <div class="task-status">
                        <i class="fas fa-check-circle"></i>
                    </div>
                    <div class="task-info">
                        <h3>分布式系统理论</h3>
                        <p>第1次复习 (学习后1天)</p>
                    </div>
                    <div class="task-action">
                        <span class="completed-text">已完成</span>
                    </div>
                </div>
                <div class="task-item completed">
                    <div class="task-status">
                        <i class="fas fa-check-circle"></i>
                    </div>
                    <div class="task-info">
                        <h3>设计模式</h3>
                        <p>第2次复习 (学习后3天)</p>
                    </div>
                    <div class="task-action">
                        <span class="completed-text">已完成</span>
                    </div>
                </div>
                <div class="task-item completed">
                    <div class="task-status">
                        <i class="fas fa-check-circle"></i>
                    </div>
                    <div class="task-info">
                        <h3>软件工程</h3>
                        <p>第3次复习 (学习后7天)</p>
                    </div>
                    <div class="task-action">
                        <span class="completed-text">已完成</span>
                    </div>
                </div>
                <div class="task-item">
                    <div class="task-status">
                        <i class="far fa-circle"></i>
                    </div>
                    <div class="task-info">
                        <h3>微服务架构</h3>
                        <p>第1次复习 (学习后1天)</p>
                    </div>
                    <div class="task-action">
                        <button class="review-btn">开始复习</button>
                    </div>
                </div>
                <div class="task-item">
                    <div class="task-status">
                        <i class="far fa-circle"></i>
                    </div>
                    <div class="task-info">
                        <h3>项目管理</h3>
                        <p>第2次复习 (学习后3天)</p>
                    </div>
                    <div class="task-action">
                        <button class="review-btn">开始复习</button>
                    </div>
                </div>
            </div>
        </section>

        <!-- 记忆曲线图表 -->
        <section class="memory-chart">
            <div class="chart-header">
                <h3>记忆曲线</h3>
                <div class="chart-filter">
                    <select id="chart-topic">
                        <option value="all">全部主题</option>
                        <option value="distributed">分布式系统</option>
                        <option value="design">设计模式</option>
                        <option value="microservice">微服务架构</option>
                    </select>
                </div>
            </div>
            <div class="chart-container">
                <canvas id="memory-curve-chart"></canvas>
            </div>
            <div class="chart-legend">
                <div class="legend-item">
                    <div class="legend-color" style="background-color: #4a6bdf;"></div>
                    <span>记忆曲线</span>
                </div>
                <div class="legend-item">
                    <div class="legend-color" style="background-color: #ff7043;"></div>
                    <span>复习点</span>
                </div>
                <div class="legend-item">
                    <div class="legend-color" style="background-color: #4caf50;"></div>
                    <span>当前记忆水平</span>
                </div>
            </div>
        </section>

        <!-- 复习计划 -->
        <section class="review-calendar">
            <div class="calendar-header">
                <h3>未来复习计划</h3>
                <div class="calendar-nav">
                    <i class="fas fa-chevron-left"></i>
                    <span>2023年3月</span>
                    <i class="fas fa-chevron-right"></i>
                </div>
            </div>
            <div class="calendar-grid">
                <div class="calendar-day header">一</div>
                <div class="calendar-day header">二</div>
                <div class="calendar-day header">三</div>
                <div class="calendar-day header">四</div>
                <div class="calendar-day header">五</div>
                <div class="calendar-day header">六</div>
                <div class="calendar-day header">日</div>
                
                <div class="calendar-day empty"></div>
                <div class="calendar-day empty"></div>
                <div class="calendar-day">1</div>
                <div class="calendar-day">2</div>
                <div class="calendar-day">3</div>
                <div class="calendar-day">4</div>
                <div class="calendar-day">5</div>
                
                <div class="calendar-day">6</div>
                <div class="calendar-day">7</div>
                <div class="calendar-day">8</div>
                <div class="calendar-day">9</div>
                <div class="calendar-day">10</div>
                <div class="calendar-day">11</div>
                <div class="calendar-day">12</div>
                
                <div class="calendar-day">13</div>
                <div class="calendar-day">14</div>
                <div class="calendar-day">15</div>
                <div class="calendar-day">16</div>
                <div class="calendar-day has-task">17 <span class="task-count">3</span></div>
                <div class="calendar-day">18</div>
                <div class="calendar-day">19</div>
                
                <div class="calendar-day has-task">20 <span class="task-count">2</span></div>
                <div class="calendar-day">21</div>
                <div class="calendar-day">22</div>
                <div class="calendar-day has-task">23 <span class="task-count">4</span></div>
                <div class="calendar-day">24</div>
                <div class="calendar-day">25</div>
                <div class="calendar-day">26</div>
                
                <div class="calendar-day">27</div>
                <div class="calendar-day has-task">28 <span class="task-count">1</span></div>
                <div class="calendar-day">29</div>
                <div class="calendar-day">30</div>
                <div class="calendar-day">31</div>
                <div class="calendar-day empty"></div>
                <div class="calendar-day empty"></div>
            </div>
        </section>

        <!-- 底部导航 -->
        <nav class="bottom-nav">
            <a href="index.html">
                <i class="fas fa-home"></i>
                <span>学习</span>
            </a>
            <a href="profile.html">
                <i class="fas fa-user"></i>
                <span>我的</span>
            </a>
        </nav>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="js/memory.js"></script>
</body>
</html> 